feat(workflows): show email previews in the workflow editor - #356

Problem

Feature flags. No feature flag controls the canvas preview and graph-layout changes.

• People building a workflow see each email step as a small title card, so they cannot tell what an email says without opening it.
• Emails are what most workflows send, so the editor should keep their content in view.

Fork handoff for source #111731. Modernized head 37e86bcbb0eac5209757a36d0b0bb2e62f93de96. This draft prepares review and recreation in the upstream repository.

Changes

• Email steps show a scaled-down preview of their HTML in the graph editor and in the list view.
• In dark mode the preview is inverted, so a white email does not glare in a dark editor. Photos inside the email invert too.
• The preview reuses EmailPreviewThumbnail, which is sandboxed, runs no scripts, and keeps the HTML out of session replay with ph-no-capture. Two sizes are added to it.
• Previews appear for function_email steps and for generic steps that use the email template.
• In the graph, email nodes are larger (182×234 instead of 120×34).
• The graph layout and edge handles use each node's size. Sibling branches still start on one row, and the branch-join dropzone stays centered on the larger node.
• In the list view, a 288px preview sits under the step title, and the icon and drag handle align to the top.
• Liquid variables show as written, for example {{ person.properties.first_name }}.
• Mechanical: the fixed handle-position constants move into a nodeSize helper, and the story fixtures get a realistic email template.

	Light	Dark
Graph
List

Before, an email step looked like every other step: a title card with no content. These screenshots replace the first upload, which showed an earlier iteration.

How did you test this code?

Test rationale: hogFlowEditorLogic.test.ts gets four cases. The closest existing tests, "graph identity across rebuilds" and "showDropzones branch-join placement", do not check sizes.

• Email layout, for function_email and for generic email-template steps: fails when the layout or the edge handles ignore the email node size, which makes the preview overlap the next step.
• Sibling branch row: fails when ELK centers a layer again (before the fix the sibling sat 100px lower).
• Branch-join dropzone: fails when the dropzone sits off-center on a wider node.

Verify with hogli test products/workflows/frontend/Workflows/hogflows/hogFlowEditorLogic.test.ts. Expect 31 passing tests, including the "email step layout" block.

• The graph and list editor stories were rendered in light and dark mode through Storybook and Playwright.
• The visual review baselines for the graph and list stories that contain email steps change.
• Not checked: real customer templates, browsers other than Chromium, and the frontend CI jobs, which the draft matrix does not run.

👉 Stay up-to-date with PostHog coding conventions for a smoother review.

Modernization on e8f6965466759: Preserves upstream zoom limits and UTM-default behavior. The editor logic suite, frontend TypeScript check, and strict preflight pass. Fresh browser rendering remains unchecked. Historical proof above describes the earlier head. Fresh CI remains unverified.

Final freshness on 37e86bcbb0eac5209757a36d0b0bb2e62f93de96 against upstream master b75567aca6cce9f0499e882463fc7e71d65a064c: 69 backend and 72 frontend cases, full frontend TypeScript and strict preflight passed; full OpenAPI regeneration produced zero tracked drift. Upstream zoom behavior preserved while rebasing canvas preview sizing. Exact leases and ordinary pre-push gate verified. Prior proof remains historical. Fresh upstream CI and companion review remain unchecked.

Release status

Fork handoff only. This task does not activate rollout flags. Upstream CI and the unavailable Opus review remain handoff gaps.

• No feature flag controls this change

• This change is behind a feature flag and is not available to users

• This change makes a previously flagged feature available to everyone

• Publish to changelog?

Docs update

None.

🤖 Agent context

Autonomy: Human-driven (agent-assisted)

Agent: Claude Code, Claude Opus 5.5. Review panel: GPT-6.1 Sol through Codex, plus Claude Opus.

• Skills invoked: /tdd, /writing-tests, /writing-ui-components, /reviewing-with-coderabbit, /writing-pr-descriptions, /share-preview, /qa-swarm, /merge-risk, /leaving-pr-comments.
• CodeRabbit CLI: skipped. The CLI was signed out, and the developer chose to skip the local pass.
• The work started as a prototype shared through a Storybook preview link. Dark mode and the tests came after review of that prototype.
• A four-round review panel replaced a bespoke iframe with EmailPreviewThumbnail, which fixed session replay capture and email media queries. It also found the generic email-template steps, the dropzone offset, and the sibling-row offset.
• Dark mode uses Tailwind dark: classes, not an inversion inside the email document. Storybook sets only body[theme], and color-scheme did not reach the iframe's media query in Chromium.
• The CodeRabbit thread about external images was answered and withdrawn: the viewers are the email's own team, and the same HTML already loads in the email editor.
• Duplicate search: no open PR shows email content in the editor graph or list. feat(workflows): preview a workflow email's merge tags before the send PostHog/posthog#105379 previews merge tags inside the email editor, which is a different surface.
• All fixture and screenshot content is invented.

🤖 Generated with Claude Code

Modernization: T3 Code, Codex, gpt-6.1-sol. Skills: modernize-pr, pr, writing-pr-descriptions, writing-voice, unslop, running-ci-preflight. A fresh Claude Opus 5.5 review attempt hit an API rate limit; the modernization review remains incomplete.